<template>
  <div class="container">
    <header>
      <!-- <router-link class="back-button" to="/pick">&lt;</router-link> -->
      <button @click="$router.go(-1)" class="back-button">&lt;</button>
      <!-- <div class="title">理财选品地图</div> -->
      <h1>理财选品地图</h1>
      <button class="more-button">···</button>
    </header>
    <div class="grid">
      <!-- 行标题和内容 -->
      <div class="row" v-for="(row, rowIndex) in mapData" :key="rowIndex">
        <span class="label" :class="{ weightSelected: row.weight }">{{
          row.label
        }}</span>
        <div
          class="cell"
          v-for="(cell, cellIndex) in row.values"
          :key="cellIndex"
          :class="{ selected: cell.selected }"
          @click="handleClick(rowIndex, cellIndex)"
        >
          {{ cell.value }}
        </div>
      </div>
      <!-- X轴标签 -->
      <div class="x-axis-labels">
        <span
          v-for="(x_axis, index) in x_axis"
          :key="index"
          :class="{ weightSelected: x_axis.weight }"
        >
          {{ x_axis.value }}
        </span>
      </div>
    </div>

    <div class="tixing">*图中数字为对应类别下首只产品成立以来收益率相关数据。</div>

    <div class="choise-container">
      <button>
        回购率
        <img src="./assets_axis/down.svg" alt="" />
      </button>
      <button>
        热度
        <img src="./assets_axis/down.svg" alt="" />
      </button>
      <button>
        周期
        <img src="./assets_axis/down.svg" alt="" />
      </button>
      <button>
        点击率
        <img src="./assets_axis/down.svg" alt="" />
      </button>
      <button>
        <img src="./assets_axis/up_down.svg" alt="" />
      </button>
    </div>

    <!-- 选择产品展示 -->
    <div v-if="selectedRow !== null && selectedCol !== null">
      <div v-for="(product, index) in filteredProducts" :key="index">
        <div class="products">
          <div v-if="product.product && product.product.length > 0">
            <div
              class="product"
              v-for="(subProduct, subIndex) in product.product"
              :key="subIndex"
              @click="$router.push({path:'/ProductDetails'})"
            >
              <div class="product-title">
                <span>{{ subProduct.name }}</span>
                <span>&emsp;|&emsp;</span>
                <span>{{ subProduct.bank }}</span>
                <img
                  class="star"
                  :class="{ lightstar: subProduct.lightstar }"
                  src="./assets_axis/star.svg"
                  alt=""
                  @click.stop="subProduct.lightstar=!subProduct.lightstar"
                />
                
              </div>
              <div class="product-details">
                <span style="padding-top: 1px">{{ subProduct.rate }}</span>
                <span style="margin-left: 50px">{{ subProduct.duration }}</span>
              </div>
              <div class="product-bottom">
                <span>{{ subProduct.riskLine }}</span>
                <span style="margin-left: 60px">{{
                  subProduct.minInvestment
                }}</span>
                <span>&ensp;|&ensp;</span>
                <span>{{ subProduct.riskLevel }}</span>
              </div>
                <div class="product-down">
                  <span>产品详情</span>
                  <img src="./assets_axis/detail.svg" alt="" />
                </div>
            
            <!-- <router-link to="/ProductDetails">
              <div class="product-title">
                <span>{{ subProduct.name }}</span>
                <span>&emsp;|&emsp;</span>
                <span>{{ subProduct.bank }}</span>
                <img
                  class="star"
                  :class="{ lightstar: subProduct.lightstar }"
                  src="./assets_axis/star.svg"
                  alt=""
                  @click="subProduct.lightstar=!subProduct.lightstar"
                />
                
              </div>
              <div class="product-details">
                <span style="padding-top: 1px">{{ subProduct.rate }}</span>
                <span style="margin-left: 50px">{{ subProduct.duration }}</span>
              </div>
              <div class="product-bottom">
                <span>{{ subProduct.riskLine }}</span>
                <span style="margin-left: 60px">{{
                  subProduct.minInvestment
                }}</span>
                <span>&ensp;|&ensp;</span>
                <span>{{ subProduct.riskLevel }}</span>
              </div>
                <div class="product-down">
                  <span>产品详情</span>
                  <img src="./assets_axis/detail.svg" alt="" />
                </div>
            </router-link> -->
            </div>
          </div>
          <div v-else>
            <p>该类型暂无推荐产品</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 原产品展示 -->
    <div class="products">
      <!-- <div class="product" v-for="product in products" :key="product.id"> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 当前点击的行和列
      selectedRow: 0,
      selectedCol: 0,
      products: [
        {
          belongto: { row: 0, col: 0 },
          product: [
            {
              name: "平安理财高端客户专享A款",
              bank: "平安理财",
              rate: "4.50%",
              duration: "180天",
              minInvestment: "1万元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
            {
              name: "兴业理财稳健增益1号",
              bank: "兴业理财",
              rate: "3.00% - 4.00%",
              duration: "180天",
              minInvestment: "100元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
            {
              name: "招银理财收益宝优享计划",
              bank: "招银理财",
              rate: "2.80% - 3.50%",
              duration: "90天",
              minInvestment: "100元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 0, col: 1 },
          product: [
            {
              name: "平安理财安盈6号",
              bank: "平安理财",
              rate: "4.00%",
              duration: "9个月",
              minInvestment: "1000元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
            {
              name: "平安理财财富增值3号",
              bank: "平安理财",
              rate: "3.85%",
              duration: "12个月",
              minInvestment: "1万元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
            {
              name: "交银理财优选A款",
              bank: "交银理财",
              rate: "3.40% - 4.00%",
              duration: "9个月",
              minInvestment: "1000元起投",
              riskLine: "业绩比较基准",
              riskLevel: "三级（三级风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 0, col: 2 },

          product: [],
        },
        {
          belongto: { row: 1, col: 0 },
          product: [
            {
              name: "恒源季开放5号F",
              bank: " 苏银理财",
              rate: "2.30%-3.10%",
              duration: "103天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "恒源季开放11号F",
              bank: "苏银理财",
              rate: "2.30%-3.10%",
              duration: "102天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "鑫逸稳三个月49期-C份额（新客专属）",
              bank: "南银理财",
              rate: "2.80%",
              duration: "99天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 1, col: 1 },
          product: [
            {
              name: "恒源1年定开28期G（尊享份额）",
              bank: "苏银理财",
              rate: "2.85%-3.45%",
              duration: "371天",
              minInvestment: "100元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风）",
              lightstar: false,
            },
            {
              name: "恒源1年定开27期G（尊享份额）",
              bank: "苏银理财",
              rate: "2.85%-3.45%",
              duration: "373天",
              minInvestment: "100元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "宁波通商银行“通银丰利”系列安心赢理财第397期",
              bank: "个人理财计划",
              rate: "2.90%-3.50% ",
              duration: "196天",
              minInvestment: "1万元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 1, col: 2 },
          product: [
            {
              name: "丰裕固收762天24218期理财B款",
              bank: "杭银理财",
              rate: "3.25%",
              duration: "762天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "恒源目标盈18期（最低运作362天）",
              bank: "苏银理财",
              rate: "2.60%-3.60%",
              duration: "736天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "鑫逸稳两年88期-B份额",
              bank: "南银理财",
              rate: " 3.10%",
              duration: "749天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 2, col: 0 },
          product: [
            {
              name: "金钱包33号理财F款（尊享份额）",
              bank: "杭银理财",
              rate: "1.6607%",
              duration: "180天",
              minInvestment: "1元起投",
              riskLine: "近七日年化",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "幸福99金钱包32号理财F款 ",
              bank: "杭银理财",
              rate: "1.586%",
              duration: "180天",
              minInvestment: "1元起投",
              riskLine: "近七日年化",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "幸福99零钱包开放式理财D款",
              bank: "杭银理财",
              rate: "1.6879%",
              duration: "90天",
              minInvestment: "1元起投",
              riskLine: "近七日年化",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 2, col: 1 },
          product: [
            {
              name: "恒源6月定开2期F",
              bank: "苏银理财",
              rate: "2.40%-3.25% ",
              duration: "182天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "安心成长理财第6期",
              bank: "平安理财",
              rate: "2.45%-3.20%",
              duration: "12天",
              minInvestment: "1万元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
            {
              name: "鑫逸稳半年91期-B份额",
              bank: "南银理财",
              rate: "2.6% ",
              duration: "196天",
              minInvestment: "1元起投",
              riskLine: "业绩比较基准",
              riskLevel: "二级（中低风险）",
              lightstar: false,
            },
          ],
        },
        {
          belongto: { row: 2, col: 2 },
          product: [],
        },
      ],
      mapData: [
        {
          label: "稳中求进",
          weight: false,
          values: [
            { value: "3.10%", selected: false },
            { value: "3.45%", selected: false },
            { value: "无推荐", selected: false },
          ],
        },
        {
          label: "稳健增值",
          weight: false,
          values: [
            { value: "2.30%", selected: false },
            { value: "2.56%", selected: false }, // 选中项
            { value: "3.09%", selected: false },
          ],
        },
        {
          label: "稳健低波",
          weight: false,
          values: [
            { value: "1.96%", selected: false },
            { value: "2.10%", selected: false },
            { value: "无推荐", selected: false },
          ],
        },
      ],
      x_axis: [
        { order: 0, value: "<6个月", weight: false },
        { order: 1, value: "6个月-12个月", weight: false },
        { order: 2, value: ">12个月", weight: false },
      ],
    };
  },
  computed: {
    // 根据选中的 row 和 col 过滤对应的产品
    filteredProducts() {
      return this.products.filter(
        (product) =>
          product.belongto.row === this.selectedRow &&
          product.belongto.col === this.selectedCol
      );
    },
  },
  methods: {
    handleClick(rowIndex, cellIndex) {
      // console.log(rowIndex, cellIndex);
      this.mapData[rowIndex].values[cellIndex].selected = true;
      this.mapData[rowIndex].weight = true;
      this.mapData[rowIndex].values.forEach((cell, index) => {
        if (index !== cellIndex) {
          cell.selected = false;
        }
      });
      this.mapData.forEach((row, index) => {
        if (index !== rowIndex) {
          row.weight = false;
          row.values.forEach((cell) => {
            cell.selected = false;
          });
        }
      });
      this.x_axis.forEach((x_axis) => {
        if (x_axis.order === cellIndex) {
          x_axis.weight = true;
        }
      });
      this.x_axis.forEach((x_axis) => {
        if (x_axis.order !== cellIndex) {
          x_axis.weight = false;
        }
      });
      this.selectedRow = rowIndex;
      this.selectedCol = cellIndex;
    },
    handleStar(productIndex) {
      // alert(productIndex);
      this.products[productIndex].lightstar =
        !this.products[productIndex].lightstar;
      // this.products.forEach((product,index) => {
      //   if(index!== productIndex)
      //   product.lightstar = false;
      // });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
  /* background-color: #f9f3f1; */
  /* background-image: url("./assets_axis/背景图.svg"); */
  background: url("./assets_axis/坐标轴.svg");
  background-size: cover;
  /* max-width: 415px; */
  max-width: 100%;
  margin: 0 auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* padding-bottom: 16px; */
}
h1 {
  padding: 0 20px;
  font-size: 20px;
  /* font-weight: bold; */
  color: #444;
}
.back-button {
  position: absolute;
  left: -2px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}
.more-button {
  position: absolute;
  right: 0;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}

.grid {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem;
}

.row {
  display: flex;
  justify-content: space-between;
  /* flex-wrap: wrap; 增加 wrap 让内容在小屏幕时换行 */
  /* padding: 0 2%; 使用百分比代替固定值，原来可能是 px */
  align-items: center;
  width: 100%;
  /* justify-content: space-between; */
}

.label {
  width: 100px;
  font-size: 14px;
  text-align: center;
  margin-right: 5px;
}

.weightSelected {
  font-weight: bold;
}
.cell {
  /* flex: 1; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 9px 15px;
  margin: 15px 12px; */
  /* padding: 9px 2%; 
  margin: 15px 1.5%; */
  padding: 0.6rem 1rem;
  margin: 0.9rem 0.7rem;
  aspect-ratio: 79 / 46;
  background-color: white;
  font-size: 0.9rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
}

.selected {
  background-color: #f3d4ac;
  /* border: #f89513 solid 1px; */
  /* background-image: url('./assets_axis/bcg_cell.svg') ; */
}
.x-axis-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: 0.9rem;
  width: 16rem;
  padding-top: 0;
  padding-left: 5.5rem;
}

.tixing{
  margin: 1rem;
  font-size: 0.7rem;
  color: #999;
}

.choise-container {
  display: flex;
  justify-content: space-between; /* 在容器内均匀分布按钮 */
  align-items: center; /* 垂直居中对齐按钮内容 */
  width: 100%; /* 按钮容器占满可用空间 */
  /* max-width: 600px; 设置最大宽度，防止按钮在大屏幕上过于分散 */
  max-width: 100%;
  margin: 0 auto; /* 水平居中容器 */
  background-color: #fff;
  margin-top: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.choise-container button {
  border: none; /* 去除按钮边框 */
  background-color: #fff;
  color: rgb(10, 10, 10); /* 按钮文字颜色 */
  /* padding: 10px 20px; 按钮内边距 */
  padding: 0.5rem 0.5rem;
  /* font-size: 14px;  */
  /* 按钮文字大小 */
  font-size: 0.8rem;
  cursor: pointer; /* 鼠标悬停时显示手形光标 */
  outline: none; /* 去除按钮聚焦时的轮廓 */
  display: flex;
  align-items: center; /* 垂直居中对齐内容 */
  justify-content: center; /* 水平居中对齐内容 */
  /* height: 50px; 统一按钮高度 */
  height: 2.5rem;
  width: 100%;
}

.choise-container button img {
  height: 1em; /* 设置图片高度与文字高度相同 */
  vertical-align: middle; /* 垂直居中对齐 */
  justify-items: center;
  filter: brightness(0) saturate(100%);
}

.choise-container button:not(:last-child) {
  margin-right: 0; /* 去除按钮之间的间距 */
}

/* .choise-container button:last-child {
  padding: 0; 去除最后一个按钮的内边距
} */
.products {
  /* padding: 10px; */
  /* margin-top: 10px;
  border-radius: 10px; */
  margin-top: 0.5rem;
  border-radius: 0.5rem;
}

.product {
  background: url("./assets_axis/矩形3.svg") no-repeat center/cover;
  /* padding: 15px;
  margin-bottom: 10px;
  background-color: rgb(9, 8, 8);
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  background-color: rgb(9, 8, 8);
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.product-title {
  /* font-size: 16px; */
  font-size: 1rem;
  display: flex;
  align-items: center;
  color: rgb(7, 7, 7);
  /* justify-content: space-between; */
}
.star {
  margin-left: auto; /* 水平方向上靠右 */
  /* margin-right: 5px; */
  margin-right: 0.5rem;
}
.lightstar {
  /* fill: #f3d4ac;
  background-color: rgb(231, 122, 27); */
  /* filter: brightness(0) saturate(100%) invert(16%) sepia(98%) saturate(6024%) hue-rotate(357deg) brightness(101%) contrast(106%); */
  /* filter: brightness(0) saturate(100%) invert(66%) sepia(100%) saturate(300%) hue-rotate(-45deg) brightness(105%) contrast(100%); */
  filter: brightness(0) saturate(100%) invert(66%) sepia(100%) saturate(300%)
    hue-rotate(-30deg) brightness(105%) contrast(100%);
}
.product-details {
  /* margin-top: 10px;
  font-size: 14px; */
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: rgb(33, 30, 30);
  display: flex;
  align-items: center;
  /* text-align: center; */
  /* justify-content: space-between; */
}

.product-bottom {
  /* margin-top: 20px;
  font-size: 10px; */
  margin-top: 1rem;
  font-size: 0.7rem;
  color: #999;
  display: flex;
  /* justify-content: space-between; */
}
.product-down {
  /* margin-top: 5px;
  font-size: 10px; */
  margin-top: 0.3rem;
  font-size: 0.7rem;
  /* color: rgb(136, 135, 135); */
  color: #616161;
  display: flex;
  padding-top: 0.3rem;
  justify-content: space-between;
  border-top: 1px solid rgb(229, 229, 229);
}
</style>
